<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import toast from "vant/es/toast/index";
import Loading from "../../components/loading.vue";

const { proxy } = getCurrentInstance();

const loading = ref(true);
const lat = ref(null);
const lng = ref(null);
const zoom = ref(null);
const bgImage = new URL("../../assets/img/product.png", import.meta.url).href;
const contentImage = new URL("../../assets/img/product_bg.png", import.meta.url).href;
const logo = new URL("../../assets/img/info_logo.png", import.meta.url).href;
const traceData = ref({});
const prdInformation = ref({});
const isHome = ref(false);

const initMap = () => {
  //定义地图中心点坐标
  let center = new qq.maps.LatLng(lat.value, lng.value);
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  let map = new qq.maps.Map(document.getElementById("container"), {
    center: center, //设置地图中心点坐标
    zoom: Number(zoom.value), //设置地图缩放级别
    pitch: 43.5, //设置俯仰角
    rotation: 45, //设置地图旋转角度
  });

  let marker = new qq.maps.Marker({
    position: center,
    map: map,
  });
  loading.value = false;
};

/** 获取产品信息 */
const locationInfo = ref();
const initData = async () => {
  let res = await proxy.$api.call("qin.getTraceBackCodeData", {
    traceabilityCode: traceabilityCode.value,
  });
  if (!res || !res.res) return;
  traceData.value = res ?? {};
  if (traceData.value.seaAreaLocation) {
    locationInfo.value = traceData.value.seaAreaLocation.replace(/\s+/g, "").split(",");
    lng.value = locationInfo.value[0];
    lat.value = locationInfo.value[1];
    // zoom.value = locationInfo.value[2] ?? 10;
    zoom.value = 7;
    initMap();
  }
};

/**  */
const position = ref([]);
const report = ref([]);
const getTraceBackData = async () => {
  try {
    let res = await proxy.$api.call("qin.getTraceBackData", {
      traceBack: traceabilityCode.value
    });
    if (!res.res) return;
    prdInformation.value = res?.product ?? {};
    position.value = res?.position ?? [];
    report.value = res?.report ?? [];
  } finally {
    loading.value = false;
  }
};

/**
 * 回到首页
 */
const gotoHome = () => {
  location.href = `./?traceabilityCode=${traceabilityCode.value}`;
};

const traceabilityCode = ref("");
onMounted(() => {
  traceabilityCode.value = useRouter().currentRoute.value.query.traceabilityCode;
  if (!traceabilityCode.value) {
    toast.fail("追溯信息不存在");
    loading.value = false;
    return;
  }
  initData();
  getTraceBackData();
});
document.title = "晓芹追溯信息查询";
</script>
<template>
  <Loading v-if="loading" />
  <!-- 顶部显示 -->
  <div class="info-top backgroundImage" :style="{ backgroundImage: `url(${bgImage})` }">
    <!-- 返回首页 -->
    <div class="back-btn" @click="gotoHome" v-if="isHome">
      <svg
        t="1670402174427"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2813"
        width="14"
        height="14"
      >
        <path
          d="M982.028557 404.405174 573.32303 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L43.175542 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s31.134554 16.169326 44.895683 5.332437l13.073072-10.320847 0 387.547791c0 54.872501 56.936671 95.983874 107.852847 95.983874l639.892491 0c50.22812 0 84.1149-38.531161 84.1149-95.983874L927.672098 443.452377l14.449185 11.352931c5.84848 4.644381 12.729044 6.880564 19.781623 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C998.369898 435.539728 995.789686 415.414077 982.028557 404.405174zM607.897867 797.113388l0 66.741475-63.989249 0-63.989249 0-63.989249 0 0-66.741475 0-112.325214c0-37.155048 30.102469-77.234336 95.983874-77.234336 66.053418 0 95.983874 40.079288 95.983874 77.234336L607.897867 797.113388 607.897867 797.113388z"
          p-id="2814"
          fill="#ffffff"
        ></path>
      </svg>
      <span>回到首页</span>
    </div>
    <!-- 查询次数 -->
    <div class="info-top-search" :class="{ 'search-h': isHome }">
      顾客已查询{{ traceData.frequency || 0 }}次
    </div>
    <!-- logo -->
    <div class="info-top-logo" :class="{ 'logo-h': isHome }">
      <img :src="logo" alt="" />
    </div>
  </div>
  <div class="info-top-content" :style="{ backgroundImage: `url(${contentImage})` }">
    <div class="info-top-content-panel">
      <div class="info-top-content-panel-title primary">产品信息</div>
      <div class="info-top-content-panel-table">
        <table>
          <tr class="info-tr">
            <td class="info-td info-td-title">产品名称</td>
            <td class="info-td info-td-right">{{ traceData.materialName || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">产品规格</td>
            <td class="info-td info-td-right">{{ traceData.materialSpec || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">生产批号</td>
            <td class="info-td info-td-right">{{ traceData.batchNo || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">出库日期</td>
            <td class="info-td info-td-right">{{ traceData.createTime || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">保质期至</td>
            <td class="info-td info-td-right">{{ traceData.shelfDate || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">生产标准号</td>
            <td class="info-td info-td-right">{{ traceData.prdStandardNo || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">生产许可证</td>
            <td class="info-td info-td-right">{{ traceData.prdLicence || "-" }}</td>
          </tr>
          <tr class="info-tr">
            <td class="info-td info-td-title">验证结果</td>
            <td class="info-td info-td-right">
              {{ traceData.inspectionResults || "-" }}
            </td>
          </tr>
          <tr class="info-tr">
            <td class="info-td">海域位置</td>
            <td class="info-td info-td-right">
              {{ traceData.seaAreaLocationStr || "-" }}
            </td>
          </tr>
          <!-- <tr class="info-tr">
            <td class="info-td info-td-title">所属区域/门店</td>
            <td class="info-td info-td-right">{{ traceData.saleChnnel || "-" }}</td>
          </tr> -->
          <tr class="info-tr">
            <td class="info-td info-td-title">所属区域/门店</td>
            <td class="info-td info-td-right">{{ traceData.saleChnnel  ? traceData.saleChnnel : traceData.receive ? traceData.receive : '-'  }}</td>
          </tr>
          <!-- <tr class="info-tr">
            <td class="info-td info-td-title">销售日期</td>
            <td class="info-td info-td-right">{{ traceData.lastTime || "-" }}</td>
          </tr> -->
          <!-- <tr class="info-tr">
            <td class="info-td info-td-title">发出方</td>
            <td class="info-td info-td-right">{{ traceData.issue || "-" }}</td>
          </tr> -->
          <!-- <tr class="info-tr">
            <td class="info-td info-td-title">接收方</td>
            <td class="info-td info-td-right">{{ traceData.receive || "-" }}</td>
          </tr> -->
        </table>
        <!-- 定义地图显示容器 -->
        <div class="map">
          <div id="container"></div>
        </div>
      </div>
      <div class="info-top-content-panel-title">海域图片</div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#D8000F">
        <van-swipe-item v-for="(item, index) in position" :key="index">
          <div
            class="img backgroundImage"
            :style="{
              backgroundImage: `url(${item.url})`,
            }"
          ></div>
        </van-swipe-item>
      </van-swipe>
      <div class="info-top-content-panel-title margin-t">检测报告</div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#D8000F">
        <van-swipe-item v-for="(item, index) in report" :key="index">
          <div
            class="img report"
            :style="{
              backgroundImage: `url(${item.url})`,
            }"
          ></div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<style>
body {
  background-color: #f9f9f9;
}
</style>
<style lang="less" scoped>
.back-btn {
  position: absolute;
  top: 1.5vh;
  left: 10px;
  width: max-content;
  padding: 6px 12px;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background-color: #0000003b;
  z-index: 999;

  span {
    margin-left: 4px;
  }
}

.info-top {
  height: 50vh;
  width: 100%;
  position: relative;

  .info-top-search {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    top: 10vh;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    &.search-h {
      top: 12vh;
    }
  }

  .info-top-logo {
    position: absolute;
    left: 15px;
    top: 2vh;
    width: 100px;

    &.logo-h {
      top: 5vh;
    }

    img {
      width: 100%;
    }
  }
}

.info-top-content {
  min-height: 50vh;
  transform: translateY(-2px);
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100%;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);

  .info-top-content-panel {
    position: relative;
    top: -50px;
    width: calc(100% - 30px);
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 17px;
    padding: 12px;
    box-sizing: border-box;

    .info-top-content-panel-title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 28px;
      margin: 8px 0 20px 0;

      &.primary {
        color: var(--primary);
      }

      &.margin-t {
        margin-top: 30px;
      }
    }

    .info-top-content-panel-table {
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      .info-tr {
        height: 36px;

        .info-td {
          font-size: 14px;
          padding: 0 15px;
          border: 1px solid #868686;
        }
        .info-td-right {
          text-align: right;
        }

        .info-td-title {
          white-space: nowrap;
        }
      }
    }
  }
}

.map {
  height: 200px;
  margin: 0 auto 30px auto;
  position: relative;
  overflow: hidden;
  border-radius: 4px;

  #container {
    height: 300px;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  min-height: 200px;
  text-align: center;
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;

  .img {
    height: 250px;
    border-radius: 4px;

    &.report {
      background-position: center top;
      background-repeat: no-repeat;
      background-size: auto 100%;
    }
  }
}
</style>
